<div class="flex flex-col flex-auto min-w-0">

    <!-- Header -->
    <div class="flex flex-col shadow bg-card">

        <!-- Cover image -->
        <div>
            <img
                class="h-40 lg:h-80 object-cover"
                src="assets/images/pages/profile/cover.jpg"
                alt="Cover image">
        </div>

        <!-- User info -->
        <div class="flex flex-col flex-0 lg:flex-row items-center max-w-5xl w-full mx-auto px-8 lg:h-18 bg-card">

            <!-- Avatar -->
            <div class="-mt-26 lg:-mt-22 rounded-full">
                <img
                    class="w-32 h-32 rounded-full ring-4 ring-bg-card"
                    src="assets/images/avatars/male-04.jpg"
                    alt="User avatar">
            </div>

            <!-- Details -->
            <div class="flex flex-col items-center lg:items-start mt-4 lg:mt-0 lg:ml-8">
                <div class="text-lg font-bold leading-none">Brian Hughes</div>
                <div class="text-secondary">London, UK</div>
            </div>

            <!-- Separator -->
            <div class="hidden lg:flex h-8 mx-8 border-l-2"></div>

            <!-- Stats -->
            <div class="flex items-center mt-6 lg:mt-0 space-x-6">
                <div class="flex flex-col items-center">
                    <span class="font-bold">200k</span>
                    <span class="text-sm font-medium text-secondary">FOLLOWERS</span>
                </div>
                <div class="flex flex-col items-center">
                    <span class="font-bold">1.2k</span>
                    <span class="text-sm font-medium text-secondary">FOLLOWING</span>
                </div>
            </div>

            <!-- Menu -->
            <div class="flex items-center mt-8 mb-4 lg:m-0 lg:ml-auto space-x-6">
                <a
                    class="font-medium"
                    [routerLink]="['./']">
                    Home
                </a>
                <a
                    class="text-secondary"
                    [routerLink]="['./']">
                    About
                </a>
                <a
                    class="text-secondary"
                    [routerLink]="['./']">
                    Followers
                </a>
                <a
                    class="text-secondary"
                    [routerLink]="['./']">
                    Gallery
                </a>
            </div>

        </div>

    </div>

    <!-- Main -->
    <div class="flex flex-auto justify-center w-full max-w-5xl mx-auto p-6 sm:p-8">

        <!-- Column -->
        <div class="hidden lg:flex flex-col items-start mr-8">

            <!-- About me -->
            <fuse-card class="flex flex-col max-w-80 w-full p-8">
                <div class="text-2xl font-semibold leading-tight">About Me</div>
                <div class="mt-4">
                    I’m a friendly kitchen assistant who suffers from a severe phobia of buttons.
                    <br><br>
                    Brother of Elijah Jay Watkins, who has phobia of buttons and trust issues.
                </div>
                <hr class="w-full border-t my-6">
                <div class="flex flex-col">
                    <div class="flex items-center">
                        <mat-icon
                            class="icon-size-5 mr-3"
                            [svgIcon]="'heroicons_solid:location-marker'"></mat-icon>
                        <span class="leading-none">London, UK</span>
                    </div>
                    <div class="flex items-center mt-4">
                        <mat-icon
                            class="icon-size-5 mr-3"
                            [svgIcon]="'heroicons_solid:briefcase'"></mat-icon>
                        <span class="leading-none">ACME Corp. Lead UX Designer</span>
                    </div>
                    <div class="flex items-center mt-4">
                        <mat-icon
                            class="icon-size-5 mr-3"
                            [svgIcon]="'heroicons_solid:cake'"></mat-icon>
                        <span class="leading-none">April, 24</span>
                    </div>
                </div>
                <button
                    class="px-6 mt-8"
                    mat-flat-button
                    [color]="'primary'"
                    [routerLink]="['./']">
                    See complete bio
                </button>
            </fuse-card>

            <!-- Followers -->
            <fuse-card class="flex flex-col max-w-80 w-full mt-8 px-8 pt-6 pb-4">
                <div class="flex items-center justify-between">
                    <div class="text-2xl font-semibold leading-tight">Followers</div>
                    <div class="-mr-3">
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="listCard08Menu">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                        </button>
                        <mat-menu #listCard08Menu="matMenu">
                            <button mat-menu-item>Find friends</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="flex flex-col">
                    <div class="flex justify-between mt-6">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-01.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-01.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex justify-between mt-3">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-03.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-03.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-04.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex justify-between mt-3">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-05.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-06.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-05.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-06.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex justify-between mt-3">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-07.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/male-08.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded-full"
                            src="assets/images/avatars/female-08.jpg"
                            alt="Card cover image">
                    </div>
                </div>
                <div class="flex items-center mt-6 -mx-3">
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        See all followers
                    </button>
                </div>
            </fuse-card>

            <!-- Gallery -->
            <fuse-card class="flex flex-col max-w-80 w-full mt-8 px-8 pt-6 pb-4">
                <div class="flex items-center justify-between">
                    <div class="text-2xl font-semibold leading-tight">Gallery</div>
                    <div class="-mr-3">
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="listCard09Menu">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                        </button>
                        <mat-menu #listCard09Menu="matMenu">
                            <button mat-menu-item>Add image</button>
                            <button mat-menu-item>Add video</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="flex flex-col">
                    <div class="flex justify-between mt-6">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/14-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/15-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/16-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/17-640x480.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex justify-between mt-3">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/18-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/19-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/20-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/21-640x480.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex justify-between mt-3">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/22-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/23-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/24-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/25-640x480.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex justify-between mt-3">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/26-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/27-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/28-640x480.jpg"
                            alt="Card cover image">
                        <img
                            class="w-14 h-14 rounded object-cover"
                            src="assets/images/cards/29-640x480.jpg"
                            alt="Card cover image">
                    </div>
                </div>
                <div class="flex items-center mt-6 -mx-3">
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        See entire gallery
                    </button>
                </div>
            </fuse-card>

            <!-- Groups -->
            <fuse-card class="flex flex-col max-w-80 w-full mt-8 px-8 pt-6 pb-4">
                <div class="flex items-center justify-between">
                    <div class="text-2xl font-semibold leading-tight">Groups</div>
                    <div class="-mr-3">
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="listCard02Menu">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                        </button>
                        <mat-menu #listCard02Menu="matMenu">
                            <button mat-menu-item>Search for groups</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="flex flex-col mt-5">
                    <div class="flex items-center">
                        <img
                            class="w-14 h-14 mr-4 rounded object-cover"
                            src="assets/images/cards/coffee-shop-01-320x200.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="font-medium leading-none">The Port Cafe</div>
                            <div class="text-md truncate leading-none mt-1">Best cafe of the downtown New York</div>
                            <div class="text-md leading-none text-secondary mt-2">1.2k followers</div>
                        </div>
                    </div>
                    <div class="flex items-center mt-6">
                        <img
                            class="w-14 h-14 mr-4 rounded object-cover"
                            src="assets/images/cards/coffee-shop-02-512x512.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="font-medium leading-none">Design House LLC.</div>
                            <div class="text-md truncate leading-none mt-1">UI/UX, brand and product design</div>
                            <div class="text-md leading-none text-secondary mt-2">957 followers</div>
                        </div>
                    </div>
                    <div class="flex items-center mt-6">
                        <img
                            class="w-14 h-14 mr-4 rounded object-cover"
                            src="assets/images/cards/coffee-shop-03-320x320.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="font-medium leading-none">Crax Laser Tag</div>
                            <div class="text-md truncate leading-none mt-1">30% off with group of 6 people</div>
                            <div class="text-md leading-none text-secondary mt-2">342 followers</div>
                        </div>
                    </div>
                    <div class="flex items-center mt-6">
                        <img
                            class="w-14 h-14 mr-4 rounded object-cover"
                            src="assets/images/cards/sneakers-01-320x200.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="font-medium leading-none">Roadster Clothing Inc.</div>
                            <div class="text-md truncate leading-none mt-1">$25 off on orders $500 and over</div>
                            <div class="text-md leading-none text-secondary mt-2">4.7k followers</div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center mt-6 -mx-3">
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        See all groups
                    </button>
                </div>
            </fuse-card>

            <!-- News -->
            <fuse-card class="flex flex-col max-w-80 w-full mt-8 px-8 pt-6 pb-4">
                <div class="flex items-center justify-between">
                    <div class="text-2xl font-semibold leading-tight">News</div>
                    <div class="-mr-3">
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="listCard01Menu">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                        </button>
                        <mat-menu #listCard01Menu="matMenu">
                            <button mat-menu-item>Mark all as read</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="flex flex-col mt-5">
                    <div class="flex">
                        <mat-icon
                            class="icon-size-5 mt-0.5 mr-2"
                            [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                        <div><b>20% OFF</b> in your favorite hats shop on next Friday.</div>
                    </div>
                    <div class="flex mt-5">
                        <mat-icon
                            class="icon-size-5 mt-0.5 mr-2"
                            [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                        <div>Upcoming meetups within 20 miles.
                            <a
                                class="text-secondary whitespace-nowrap hover:underline"
                                [routerLink]="['./']">See details
                            </a>
                        </div>
                    </div>
                    <div class="flex mt-5">
                        <mat-icon
                            class="icon-size-5 mt-0.5 mr-2"
                            [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                        <div>Concerts from your favorite bands available within 100 miles.
                            <a
                                class="text-secondary whitespace-nowrap hover:underline"
                                [routerLink]="['./']">See details
                            </a>
                        </div>
                    </div>
                </div>
                <div class="flex items-center mt-4 -mx-3">
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        See all news
                    </button>
                </div>
            </fuse-card>

            <!-- Activity Feed -->
            <fuse-card class="flex flex-col max-w-80 w-full mt-8 px-8 pt-6 pb-4">
                <div class="flex items-center justify-between">
                    <div class="text-2xl font-semibold leading-tight">Activity Feed</div>
                    <div class="-mr-3">
                        <button
                            mat-icon-button
                            [matMenuTriggerFor]="listCard04Menu">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                        </button>
                        <mat-menu #listCard04Menu="matMenu">
                            <button mat-menu-item>Clear activities</button>
                        </mat-menu>
                    </div>
                </div>
                <div class="flex flex-col mt-5">
                    <div class="flex">
                        <img
                            class="w-10 h-10 mr-4 rounded-full"
                            src="assets/images/avatars/female-01.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="leading-tight">Amelia Edwards commented on John Silverton's photo</div>
                            <div class="text-md leading-none text-secondary mt-2">4 minutes ago</div>
                        </div>
                    </div>
                    <div class="flex mt-8">
                        <img
                            class="w-10 h-10 mr-4 rounded-full"
                            src="assets/images/avatars/male-01.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="leading-tight">Lew Silverton changed his profile photo</div>
                            <div class="text-md leading-none text-secondary mt-2">25 minutes ago</div>
                        </div>
                    </div>
                    <div class="flex mt-8">
                        <img
                            class="w-10 h-10 mr-4 rounded-full"
                            src="assets/images/avatars/male-15.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="leading-tight">Brian Hughes liked your photo</div>
                            <div class="text-md leading-none text-secondary mt-2">3 hours ago</div>
                        </div>
                    </div>
                    <div class="flex mt-8">
                        <img
                            class="w-10 h-10 mr-4 rounded-full"
                            src="assets/images/avatars/female-15.jpg"
                            alt="Card cover image">
                        <div class="flex flex-col min-w-0">
                            <div class="leading-tight">Marleah Eagleston commented on John Silverton's photo</div>
                            <div class="text-md leading-none text-secondary mt-2">Yesterday</div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center mt-6 -mx-3">
                    <button
                        class="px-3"
                        mat-button
                        [color]="'primary'"
                        [routerLink]="['./']">
                        See entire activity feed
                    </button>
                </div>
            </fuse-card>

        </div>

        <!-- Column -->
        <div class="flex flex-col items-start">

            <!-- Create Post -->
            <fuse-card class="flex flex-col max-w-140 w-full p-6 sm:p-8 pb-6">
                <div class="text-xl font-semibold">Create Post</div>
                <div class="flex flex-col sm:flex-row items-start mt-8">
                    <div class="flex items-center mb-6 sm:mb-0">
                        <img
                            class="w-12 min-w-12 h-12 rounded-full mr-4"
                            src="assets/images/avatars/brian-hughes.jpg"
                            alt="Card cover image">
                        <div class="sm:hidden">Brian Hughes</div>
                    </div>
                    <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                        <textarea
                            matInput
                            [placeholder]="'What\'s on your mind?'"
                            [rows]="3"
                            matTextareaAutosize></textarea>
                    </mat-form-field>
                </div>
                <div class="flex items-center mt-6 sm:mt-8 -mx-3">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:photograph'"></mat-icon>
                        <span>Photo / Video</span>
                    </button>
                    <button
                        class="px-3 mr-1 hidden sm:inline-flex"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
                        <span>Tag Friends</span>
                    </button>
                    <button
                        class="px-3 mr-1 hidden sm:inline-flex"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
                        <span>Feeling</span>
                    </button>
                    <button
                        class="px-3"
                        mat-button
                        [matMenuTriggerFor]="postCardMenu01">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-horizontal'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu01="matMenu">
                        <button
                            class="sm:hidden"
                            mat-menu-item
                            [routerLink]="['./']">
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
                                <span>Tag Friends</span>
                            </span>
                        </button>
                        <button
                            class="sm:hidden"
                            mat-menu-item
                            [routerLink]="['./']">
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
                                <span>Feeling</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:play'"></mat-icon>
                                <span>Live</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:sparkles'"></mat-icon>
                                <span>Gif</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:location-marker'"></mat-icon>
                                <span>Check in</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
            </fuse-card>

            <!-- Post 1 -->
            <fuse-card
                class="flex flex-col max-w-140 w-full mt-8"
                #expandableCard02="fuseCard">
                <div class="flex items-center mx-6 sm:mx-8 mt-6 mb-4">
                    <img
                        class="w-10 h-10 rounded-full mr-4"
                        src="assets/images/avatars/female-01.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col">
                        <span class="font-semibold leading-none">Caroline Lundu</span>
                        <span class="text-sm text-secondary leading-none mt-1">29 minutes ago</span>
                    </div>
                    <button
                        class="ml-auto -mr-4"
                        mat-icon-button
                        [matMenuTriggerFor]="postCardMenu02">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu02="matMenu">
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:save'"></mat-icon>
                                <span>Save post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                                <span>Hide post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                <span>Snooze for 30 days</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
                                <span>Hide all</span>
                            </span>
                        </button>
                        <mat-divider class="my-2"></mat-divider>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
                                <span>Report post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                                <span>Turn on notifications for this post</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
                <div class="mx-6 sm:mx-8 mt-2 mb-6">
                    Look at that sky! I so want to be there.. Can we arrange a trip? Is that a possibility? Please!!!
                </div>
                <div class="relative mb-4">
                    <img
                        class="h-80 object-cover"
                        src="assets/images/cards/14-640x480.jpg"
                        alt="Card cover image">
                    <div
                        class="absolute bottom-0 left-0 flex items-center justify-center w-8 h-8 m-4 rounded-full cursor-pointer bg-gray-700"
                        [matTooltip]="'Barmouth / UK'"
                        [matTooltipPosition]="'right'">
                        <mat-icon
                            class="icon-size-4 text-gray-100"
                            [svgIcon]="'heroicons_solid:location-marker'"></mat-icon>
                    </div>
                </div>
                <div class="flex items-center mx-3 sm:mx-5">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 text-red-500 mr-2"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        <span>Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
                        <span>Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
                        <span>Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center mx-6 sm:mx-8 mb-4 sm:mb-6">
                    <div class="flex items-center">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full text-card ring-2 ring-white"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/male-09.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <div class="text-md tracking-tight ml-3">You and 24 more liked this</div>
                    </div>
                    <div class="hidden sm:flex flex-auto"></div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <button
                            class="px-3 mr-1 -ml-2 sm:ml-0"
                            mat-button>
                            4 shares
                        </button>
                        <button
                            class="px-3 sm:-mr-4"
                            mat-button
                            (click)="expandableCard02.expanded = !expandableCard02.expanded">
                            <span class="mr-1">5 Comments</span>
                            <mat-icon
                                class="icon-size-5 transform transition-transform ease-in-out duration-150 rotate-0"
                                [ngClass]="{'rotate-180': expandableCard02.expanded}"
                                [svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
                        </button>
                    </div>
                </div>

                <ng-container fuseCardExpansion>
                    <hr class="border-b m-0">
                    <div class="flex flex-col mx-4 sm:mx-8 mt-6 mb-3">
                        <div class="flex items-start">
                            <img
                                class="w-12 h-12 rounded-full mr-5"
                                src="assets/images/avatars/brian-hughes.jpg"
                                alt="Card cover image">
                            <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                                <textarea
                                    matInput
                                    [placeholder]="'Write a comment...'"
                                    [rows]="3"
                                    matTextareaAutosize></textarea>
                            </mat-form-field>
                        </div>
                        <div class="flex items-center mt-3 ml-auto -mr-3">
                            <button mat-icon-button>
                                <mat-icon
                                    class="icon-size-5"
                                    [svgIcon]="'heroicons_solid:sparkles'"></mat-icon>
                            </button>
                            <button mat-icon-button>
                                <mat-icon
                                    class="icon-size-5"
                                    [svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
                            </button>
                            <button mat-icon-button>
                                <mat-icon
                                    class="icon-size-5"
                                    [svgIcon]="'heroicons_solid:photograph'"></mat-icon>
                            </button>
                        </div>
                    </div>
                    <hr class="border-b mx-4 sm:mx-8 my-0">
                    <div class="max-h-120 overflow-y-auto">
                        <div class="relative flex flex-col mx-4 sm:mx-8 my-6">
                            <div class="flex items-start">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/male-05.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Rutherford Brannan</b> Oh, I’m in.. Let’s arrange a trip for the next weekend if you want!
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Hide replies
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>17 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8 ml-12">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/female-01.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Caroline Lundu</b> Yes!! Let's talk about it on lunch!
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>15 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8 ml-12">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/female-08.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Barbara Cotilla</b> Count me in !!!
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>12 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/male-11.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Alan Marti</b> The color of the sky doesn’t look natural at all, do you really think this is natural? I’d say Photoshop!
                                        Your trip isn't going to worth it since you won't be seeing this exact sky.
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Hide replies
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>24 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8 ml-12">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/female-01.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Caroline Lundu</b> Hey, Alan! You must be fun at parties!
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>22 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8 ml-12">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/male-11.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Alan Marti</b> Caroline, I'm telling the truth, and if you cannot stand the truth, maybe we shouldn't be friends anymore...
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>20 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8 ml-12">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/female-01.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Caroline Lundu</b> Dude! Relax! I'm just messing with you...
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>18 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8 ml-12">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/male-11.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Alan Marti</b> Sorry! I had a bad morning, let's talk about this in couple hours, I need to relax a bit :(
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>16 min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start mt-8">
                                <img
                                    class="w-8 h-8 rounded-full mr-4"
                                    src="assets/images/avatars/female-05.jpg"
                                    alt="Card cover image">
                                <div class="flex flex-col mt-0.5">
                                    <span>
                                        <b>Marleah Eagleston</b> Count me in, too!
                                    </span>
                                    <div class="flex items-center text-sm text-secondary mt-2">
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Like
                                        </a>
                                        <a
                                            class="mr-2 hover:underline"
                                            [routerLink]="'./'">Reply
                                        </a>
                                        <span class="mr-2">&bull;</span>
                                        <span>34 min</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </ng-container>
            </fuse-card>

            <!-- Post 2 -->
            <fuse-card class="flex flex-col max-w-140 w-full mt-8">
                <div class="flex items-center mx-6 sm:mx-8 mt-6 mb-1">
                    <img
                        class="w-10 h-10 rounded-full mr-4"
                        src="assets/images/avatars/female-01.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col">
                        <span class="font-semibold leading-none">Caroline Lundu</span>
                        <span class="text-sm text-secondary leading-none mt-1">29 minutes ago</span>
                    </div>
                    <button
                        class="ml-auto -mr-4"
                        mat-icon-button
                        [matMenuTriggerFor]="postCardMenu08">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu08="matMenu">
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:save'"></mat-icon>
                                <span>Save post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                                <span>Hide post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                <span>Snooze for 30 days</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
                                <span>Hide all</span>
                            </span>
                        </button>
                        <mat-divider class="my-2"></mat-divider>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
                                <span>Report post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                                <span>Turn on notifications for this post</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
                <div class="m-6 sm:mx-8">
                    <p>
                        We'll put a happy little sky in here. We touch the canvas, the canvas takes what it wants. A little happy sunlight shining through there.
                        Let's build some happy little clouds up here. I was blessed with a very steady hand; and it comes in very handy when you're doing these little delicate
                        things. This is the fun part.
                    </p>
                    <p class="mt-4">
                        Isn't it great to do something you can't fail at? Little trees and bushes grow however makes them happy.
                        Trees get lonely too, so we'll give him a little friend. There are no mistakes. You can fix anything that happens.
                    </p>
                </div>
                <div class="flex items-center mx-3 sm:mx-5">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 text-red-500 mr-2"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        <span>Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
                        <span>Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
                        <span>Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center mx-6 sm:mx-8 mb-4 sm:mb-6">
                    <div class="flex items-center">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full text-card ring-2 ring-white"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/male-09.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <div class="text-md tracking-tight ml-3">You and 24 more liked this</div>
                    </div>
                    <div class="hidden sm:flex flex-auto"></div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <button
                            class="px-3 mr-1 -ml-2 sm:ml-0"
                            mat-button>
                            4 shares
                        </button>
                        <button
                            class="px-3 sm:-mr-3"
                            mat-button>
                            No comments
                        </button>
                    </div>
                </div>
            </fuse-card>

            <!-- Post 3 -->
            <fuse-card class="flex flex-col max-w-140 w-full mt-8">
                <div class="flex items-center mx-6 sm:mx-8 mt-6 mb-4">
                    <img
                        class="w-10 h-10 rounded-full mr-4"
                        src="assets/images/avatars/female-14.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col">
                        <span class="font-semibold leading-none">Marleah Eagleston</span>
                        <span class="text-sm text-secondary leading-none mt-1">29 minutes ago</span>
                    </div>
                    <button
                        class="ml-auto -mr-4"
                        mat-icon-button
                        [matMenuTriggerFor]="postCardMenu04">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu04="matMenu">
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:save'"></mat-icon>
                                <span>Save post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                                <span>Hide post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                <span>Snooze for 30 days</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
                                <span>Hide all</span>
                            </span>
                        </button>
                        <mat-divider class="my-2"></mat-divider>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
                                <span>Report post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                                <span>Turn on notifications for this post</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
                <div class="mx-6 sm:mx-8 mt-2 mb-6">
                    Look at that sky! I so want to be there.. Can we arrange a trip? Is that a possibility? Please!!!
                </div>
                <div class="flex mx-6 sm:mx-8 mb-4">
                    <div class="flex h-80 pr-1">
                        <img
                            class="rounded object-cover"
                            src="assets/images/cards/17-640x480.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex flex-col pl-1">
                        <div class="flex h-40 pb-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/18-640x480.jpg"
                                alt="Card cover image">
                        </div>
                        <div class="flex h-40 pt-1">
                            <img
                                class="rounded object-cover"
                                src="assets/images/cards/19-640x480.jpg"
                                alt="Card cover image">
                        </div>
                    </div>
                </div>
                <div class="flex items-center mx-3 sm:mx-5">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 text-red-500 mr-2"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        <span>Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
                        <span>Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
                        <span>Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center mx-6 sm:mx-8 mb-4 sm:mb-6">
                    <div class="flex items-center">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full text-card ring-2 ring-white"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/male-09.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <div class="text-md tracking-tight ml-3">You and 24 more liked this</div>
                    </div>
                    <div class="hidden sm:flex flex-auto"></div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <button
                            class="px-3 mr-1 -ml-2 sm:ml-0"
                            mat-button>
                            4 shares
                        </button>
                        <button
                            class="px-3 sm:-mr-3"
                            mat-button>
                            No comments
                        </button>
                    </div>
                </div>
            </fuse-card>

            <!-- Post 4 -->
            <fuse-card class="flex flex-col max-w-140 w-full mt-8">
                <div class="flex items-center mx-6 sm:mx-8 mt-6 mb-4">
                    <img
                        class="w-10 h-10 rounded-full mr-4"
                        src="assets/images/avatars/female-01.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col">
                        <span class="font-medium leading-none">Caroline Lundu</span>
                        <span class="text-sm text-secondary leading-none mt-1">29 minutes ago</span>
                    </div>
                    <button
                        class="ml-auto -mr-4"
                        mat-icon-button
                        [matMenuTriggerFor]="postCardMenu10">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu10="matMenu">
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:save'"></mat-icon>
                                <span>Save post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                                <span>Hide post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                <span>Snooze for 30 days</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
                                <span>Hide all</span>
                            </span>
                        </button>
                        <mat-divider class="my-2"></mat-divider>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
                                <span>Report post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                                <span>Turn on notifications for this post</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
                <div class="mx-6 sm:mx-8 mt-2 mb-6">
                    Hey!! I never saw this one, it was amazing.. I think I’m going to buy myself a set and try his technique at home!
                </div>
                <div class="mx-6 sm:mx-8 mb-4">
                    <div class="flex flex-col rounded overflow-hidden border">
                        <div class="flex h-80">
                            <img
                                class="object-cover"
                                src="assets/images/cards/36-640x480.jpg"
                                alt="Card cover image">
                        </div>
                        <div class="m-4">
                            <div class="text-lg font-medium">Take a look behind the scenes of Rob Boss episodes</div>
                            <div class="text-secondary mt-1">
                                We'll put a happy little sky in here. We touch the canvas, the canvas takes what it wants. A little happy sunlight shining through there.
                            </div>
                            <div class="text-sm text-hint mt-2">example.com</div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center mx-3 sm:mx-5">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 text-red-500 mr-2"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        <span>Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
                        <span>Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
                        <span>Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center mx-6 sm:mx-8 mb-4 sm:mb-6">
                    <div class="flex items-center">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full text-card ring-2 ring-white"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/male-09.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <div class="text-md tracking-tight ml-3">You and 24 more liked this</div>
                    </div>
                    <div class="hidden sm:flex flex-auto"></div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <button
                            class="px-3 mr-1 -ml-2 sm:ml-0"
                            mat-button>
                            4 shares
                        </button>
                        <button
                            class="px-3 sm:-mr-3"
                            mat-button>
                            No comments
                        </button>
                    </div>
                </div>
            </fuse-card>

            <!-- Post 5 -->
            <fuse-card class="flex flex-col max-w-140 w-full mt-8">
                <div class="flex items-center mx-6 sm:mx-8 mt-6 mb-4">
                    <img
                        class="w-10 h-10 rounded-full mr-4"
                        src="assets/images/avatars/female-14.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col">
                        <span class="font-semibold leading-none">Marleah Eagleston</span>
                        <span class="text-sm text-secondary leading-none mt-1">29 minutes ago</span>
                    </div>
                    <button
                        class="ml-auto -mr-4"
                        mat-icon-button
                        [matMenuTriggerFor]="postCardMenu03">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu03="matMenu">
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:save'"></mat-icon>
                                <span>Save post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                                <span>Hide post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                <span>Snooze for 30 days</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
                                <span>Hide all</span>
                            </span>
                        </button>
                        <mat-divider class="my-2"></mat-divider>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
                                <span>Report post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                                <span>Turn on notifications for this post</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
                <div class="mx-6 sm:mx-8 mt-2 mb-6">
                    Look at that sky! I so want to be there.. Can we arrange a trip? Is that a possibility? Please!!!
                </div>
                <div class="flex mx-6 sm:mx-8 mb-4">
                    <div class="flex h-80 pr-1">
                        <img
                            class="rounded object-cover"
                            src="assets/images/cards/15-640x480.jpg"
                            alt="Card cover image">
                    </div>
                    <div class="flex h-80 pl-1">
                        <img
                            class="rounded object-cover"
                            src="assets/images/cards/16-640x480.jpg"
                            alt="Card cover image">
                    </div>
                </div>
                <div class="flex items-center mx-3 sm:mx-5">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 text-red-500 mr-2"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        <span>Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
                        <span>Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
                        <span>Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center mx-6 sm:mx-8 mb-4 sm:mb-6">
                    <div class="flex items-center">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full text-card ring-2 ring-white"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/male-09.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <div class="text-md tracking-tight ml-3">You and 24 more liked this</div>
                    </div>
                    <div class="hidden sm:flex flex-auto"></div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <button
                            class="px-3 mr-1 -ml-2 sm:ml-0"
                            mat-button>
                            4 shares
                        </button>
                        <button
                            class="px-3 sm:-mr-3"
                            mat-button>
                            No comments
                        </button>
                    </div>
                </div>
            </fuse-card>

            <!-- Post 6 -->
            <fuse-card class="flex flex-col max-w-140 w-full mt-8">
                <div class="flex items-center mx-6 sm:mx-8 mt-6 mb-4">
                    <img
                        class="w-10 h-10 rounded-full mr-4"
                        src="assets/images/avatars/female-01.jpg"
                        alt="Card cover image">
                    <div class="flex flex-col">
                        <span class="font-semibold leading-none">Caroline Lundu</span>
                        <span class="text-sm text-secondary leading-none mt-1">29 minutes ago</span>
                    </div>
                    <button
                        class="ml-auto -mr-4"
                        mat-icon-button
                        [matMenuTriggerFor]="postCardMenu09">
                        <mat-icon
                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
                    </button>
                    <mat-menu #postCardMenu09="matMenu">
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:save'"></mat-icon>
                                <span>Save post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                                <span>Hide post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:clock'"></mat-icon>
                                <span>Snooze for 30 days</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
                                <span>Hide all</span>
                            </span>
                        </button>
                        <mat-divider class="my-2"></mat-divider>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
                                <span>Report post</span>
                            </span>
                        </button>
                        <button mat-menu-item>
                            <span class="flex items-center">
                                <mat-icon
                                    class="icon-size-5 mr-3"
                                    [svgIcon]="'heroicons_solid:bell'"></mat-icon>
                                <span>Turn on notifications for this post</span>
                            </span>
                        </button>
                    </mat-menu>
                </div>
                <div class="mx-6 sm:mx-8 mt-2 mb-6">
                    Hey!! I never saw this episode, it was amazing.. I think I’m going to buy myself a set and try his technique at home!
                </div>
                <div class="mx-6 sm:mx-8 mb-4">
                    <div class="flex rounded overflow-hidden border">
                        <div class="flex-0 w-40">
                            <img
                                class="w-full h-full object-cover"
                                src="assets/images/cards/35-640x480.jpg"
                                alt="Card cover image">
                        </div>
                        <div class="m-4">
                            <div class="text-lg font-medium">Rob Boss - Season 09 Episode 04</div>
                            <div class="text-secondary mt-1">
                                We'll put a happy little sky in here. We touch the canvas, the canvas takes what it wants. A little happy sunlight shining through there.
                            </div>
                            <div class="text-sm text-hint mt-2">example.com</div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center mx-3 sm:mx-5">
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 text-red-500 mr-2"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
                        <span>Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
                        <span>Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button
                        [routerLink]="['./']">
                        <mat-icon
                            class="icon-size-5 mr-2"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
                        <span>Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center mx-6 sm:mx-8 mb-4 sm:mb-6">
                    <div class="flex items-center">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full text-card ring-2 ring-white"
                            src="assets/images/avatars/female-02.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/female-04.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/male-09.jpg"
                            alt="Card cover image">
                        <img
                            class="w-6 h-6 m-0.5 rounded-full -ml-3 text-card ring-2 ring-white"
                            src="assets/images/avatars/male-07.jpg"
                            alt="Card cover image">
                        <div class="text-md tracking-tight ml-3">You and 24 more liked this</div>
                    </div>
                    <div class="hidden sm:flex flex-auto"></div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <button
                            class="px-3 mr-1 -ml-2 sm:ml-0"
                            mat-button>
                            4 shares
                        </button>
                        <button
                            class="px-3 sm:-mr-3"
                            mat-button>
                            No comments
                        </button>
                    </div>
                </div>
            </fuse-card>

        </div>

    </div>

</div>
